<template>
	<view class="point-record">
		<view class="top-content">
			<view class="pd">
				<view class="customers-total" :style="{backgroundImage: 'url(' + currentBg + ')'}">
					<view class="customers-num">
						<view class="item">
							<template v-if="payPoint>=0">{{payPoint}}</template>
							<template v-else>-</template>
						</view>
						<view class="item">
							<template v-if="incomePoint>=0">{{incomePoint}}</template>
							<template v-else>-</template>
						</view>
					</view>
					<view class="customers-explain">
						<view class="item">支出积分</view>
						<view class="item">收入积分</view>
					</view>
				</view>
			</view>
			<scroll-view class="top-tabs-view" scroll-x="true" :scroll-left="scrollLeft">
				<block v-for="(item,index) in tabList" :key="index">
					<view class="tabs-item-wrap" :class="from=='agent'?'tabs-item-other':''" @click="swichMenu(item.value)">
						<view class="tabs-item">
							<view class="tabs-item-txt" :class="[currentTab==item.value ? 'theme-color' : '']">
								{{item.name}}
							</view>
							<view class="tabs-item-bottom" :class="[currentTab==item.value ? 'theme-color' : '']">
							</view>
						</view>
					</view>
				</block>
			</scroll-view>
			<view class="condition condition-border" v-if="from=='agent'">
				<view class="time-area" @tap="changePopShow">
					<text>时间</text>
					<view class="iconfont icon-time" :class="[!popupShow?'iconxiasanjiaoxing':'iconshangsanjiaoxing']"></view>
				</view>
				<picker @change="typeChange" :value="typeIndex" :range="jxsPickerList" :disabled="popupShow">
					<view class="time-area">
						<text>类别</text>
						<view class="iconfont icon-time" :class="[!typeShow?'iconxiasanjiaoxing':'iconshangsanjiaoxing']"></view>
					</view>
				</picker>
			</view>
			<template v-else>
				<view class="condition condition-border" v-if="currentTab==0">
					<view class="time-area" @tap="changePopShow">
						<text>时间</text>
						<view class="iconfont icon-time" :class="[!popupShow?'iconxiasanjiaoxing':'iconshangsanjiaoxing']"></view>
					</view>
					<picker @change="typeChange" :value="typeIndex" :range="gkPickerList" :disabled="popupShow">
						<view class="time-area">
							<text>类别</text>
							<view class="iconfont icon-time" :class="[!typeShow?'iconxiasanjiaoxing':'iconshangsanjiaoxing']"></view>
						</view>
					</picker>
				</view>
			</template>
		</view>
		<view class="point-all">
			<!--经销商明细-->
			<mescroll-uni v-if="from=='agent'" ref="mescrollRef" @init="mescrollInit" @down="downCallback" :up="upOption"
				@up="getRecordList" :fixed="true" :top="350">
				<view v-for="(item,index) in pointList" :key="index" class="point-wrapper">
					<view class="content-box">
						<view class="left-info">
							<template v-for="u in jxsBusinessList">
								<view v-if="u.dictValue==item.pointOptType" class="top-info">{{u.dictLabel}}</view>
							</template>
							<text class="date">{{item.createTime}}</text>
							<view class="remark" v-if="item.remark">{{item.remark}}</view>
						</view>
						<view class="right-info">
							<text v-if="item.point > 0" class="add-count">+{{item.point}}</text>
							<text v-else class="decrease-count">{{item.point}}</text>
						</view>
					</view>
				</view>
			</mescroll-uni>
			<!--非经销商明细-->
			<mescroll-uni v-if="from != 'agent'" ref="mescrollRef" @init="mescrollInit" @down="downCallback" :up="upOption"
				@up="getRecordList" :fixed="true" :top="currentTab==0?350:272">
				<view v-for="(item,index) in pointList" :key="index" class="point-wrapper">
					<view class="content-box">
						<!--可用积分明细-->
						<template v-if="currentTab == 0">
							<view class="left-info">
								<template v-for="u in gkBusinessList">
									<view v-if="u.dictValue==item.pointOptType" class="top-info">{{u.dictLabel}}</view>
								</template>
								<text class="date">{{item.createTime}}</text>
								<view class="remark" v-if="item.remark">{{item.remark}}</view>
							</view>
							<view class="right-info">
								<text v-if="item.point > 0" class="add-count">+{{item.point}}</text>
								<text v-else class="decrease-count">{{item.point}}</text>
							</view>
						</template>
						<!--DR冻结积分明细-->
						<template v-else-if="currentTab == 1">
							<!--退款订单-->
							<template v-if="item.orderId&&item.rejectId">
								<view class="left-info">
									<view class="top-info">{{item.orderId}}退货积分</view>
									<text class="date">{{item.payTime}}</text>
								</view>
								<view class="right-info">
									<text class="decrease-count" v-if="item.rejectProductPoints">-{{item.rejectProductPoints}}</text>
									<text class="decrease-count" v-else>0</text>
								</view>
							</template>
							<!--正常订单-->
							<template v-if="item.orderId&&!item.rejectId">
								<view class="left-info">
									<view class="top-info">{{item.orderId}}消费积分</view>
									<text class="date">{{item.payTime}}</text>
								</view>
								<view class="right-info">
									<text class="add-count" v-if="item.productPoints">+{{item.productPoints}}</text>
									<text class="add-count" v-else>0</text>
								</view>
							</template>
						</template>
						<!--店铺冻结积分明细-->
						<template v-else>
							<view class="left-info">
								<view class="top-info" v-if="!item.oriOrderId">{{item.orderCode}}消费积分</view>
								<view class="top-info" v-else>{{item.oriOrderCode}}退货积分</view>
								<text class="date">{{item.createTime}}</text>
							</view>
							<view class="right-info">
								<text v-if="!item.oriOrderId" class="add-count">
									<template v-if="item.orderPoints">+{{item.orderPoints}}</template>
									<template v-else>0</template>
								</text>
								<text v-else class="decrease-count">
									<template v-if="item.orderPoints">-{{item.orderPoints}}</template>
									<template v-else>0</template>
								</text>
							</view>
						</template>
					</view>
				</view>
			</mescroll-uni>
		</view>
		<loading></loading>
		<tui-modal></tui-modal>
		<date-popup @determine='determine' :beginDate='start' :endDate='end' :popupShow='popupShow' @colosePopup='colosePopup'></date-popup>
	</view>
</template>

<script>
	import datePopup from "@/components/datePopup/index.vue"
	import bgImg from '@/packageD/static/img/bg.png'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		components: {
			datePopup,
		},
		data() {
			return {
				scrollLeft: 0,
				mescroll: [],
				pointOptType: -1,//业务类型
				typeShow:false,//类别显示
				currentBg:bgImg,
				from: '', //来源
				popupShow: false,
				incomePoint: 0, //收入积分
				payPoint: 0, //支出积分
				start: '',
				end: '',
				pointList: [],
				showPicker: false,
				dateType: 'rangetime',
				dateValue: '',
				typeList: ['', 'CMS订货', '手动调整积分（上调）', '手动调整积分（下调）'],
				gkTypeList: ['','店铺消费','DR商城消费', '手动调整积分(上调)','FANS俱乐部兑换','积分过期', '手动调整积分(下调)'],
				agencyId: uni.getStorageSync('agencyId'),
				memberCode: uni.getStorageSync('memberCode'),
				customerUserId: uni.getStorageSync('customerUserId'),
				//picker
				agentTypeList:['CMS订货', '手动调整积分（上调）', '手动调整积分（下调）'],
				noneAgentTypeList:['店铺消费','DR商城消费', '手动调整积分(上调)','FANS俱乐部兑换','积分过期', '手动调整积分(下调)'],
				upOption: {
					auto: false, // 不自动加载
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量
					},
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				},
				currentTab:0,
				tabList:[],
				gkBusinessList:[],
				jxsBusinessList:[],
				gkPickerList:[],
				jxsPickerList:[],
				typeIndex: 0,
				agencyActive:0,
			};
		},
		onLoad(options) {
			// #ifdef H5
			this.$wechat.noShare();
			// #endif
			this.from = options.from;
			console.log(this.from)
			if (options.from == 'agent') {
				this.tabList=[{
					name: '可用积分',
					value: 0
				},{
					name: '冻结积分',
					value: 1
				}]
				this.getPayPoint();
			} else {
				this.tabList=[{
					name: '可用积分',
					value: 0
				},{
					name: 'DR商城冻结积分',
					value: 1
				},{
					name: '店铺冻结积分',
					value: 2
				}]
				this.querynonAgencyRebate();
			}
			this.getDic();
		},
		methods: {
			getDic() {
				
				this.gkBusinessList = this.$store.state.dictDataAll['points_business_type'];
				this.jxsBusinessList = this.$store.state.dictDataAll['agency_point_optType'];
				this.gkBusinessList.forEach(i => {
					this.gkPickerList.push(i.dictLabel);
				})
				this.gkPickerList.unshift('全部');
				console.log(this.gkBusinessList)
				this.jxsBusinessList.forEach(i => {
					this.jxsPickerList.push(i.dictLabel);
				})
				this.jxsPickerList.unshift('全部');
				
			},
			//点击其中一个 tab
			swichMenu: async function(current) {
				if(this.from == 'agent'){
					if (this.currentTab == current) {
						return false;
					} else {
						this.pointList = [];
						this.currentTab = current;
						this.agencyActive=current;
						this.getPointList({num:1,size:10});
					}
				}else{
					if (this.currentTab == current) {
						return false;
					} else {
						this.pointList = [];
						this.currentTab = current;
						if(this.currentTab == 0) {
							//可用积分明细
							this.getNoneBillPoint({num:1,size:10});
						} else if(this.currentTab == 1) {
							//dr冻结积分
							this.getDrOrderPoint({num:1,size:10});
						} else {
							//店铺冻结积分
							this.getEsOrderPoint({num:1,size:10});
						}
						
						
					}
				}
				
			},
			changePopShow() {
				this.popupShow = !this.popupShow;
				
			},
			getRecordList(page) {
				if (this.from == 'agent') {
					this.getPointList(page);
				} else {
					if(this.currentTab == 0) {
						//可用积分明细
						this.getNoneBillPoint(page);
					} else if(this.currentTab == 1) {
						//dr冻结积分
						this.getDrOrderPoint(page);
					} else if(this.currentTab == 2) {
						//店铺冻结积分
						this.getEsOrderPoint(page);
					}
				}
			},
			typeChange(e){
				this.popupShow = false;
				if(this.from == 'agent') {
					if(e.target.value == 0) {
						this.pointOptType = '';
					} else {
						this.pointOptType = this.jxsBusinessList.filter((i,k) => k==e.target.value-1)[0].dictValue;
					}
					this.getPointList({num:1,size:10});
				} else {
					if(e.target.value == 0) {
						this.pointOptType = '';
					} else {
						this.pointOptType = this.gkBusinessList.filter((i,k) => k==e.target.value-1)[0].dictValue;
					}
					this.getNoneBillPoint({num:1,size:10});
				}
				
			},
			determine(data,flag){
				if(flag=='clear'){
					this.start=''
					this.end=''
				}else{
					this.start=data[0]
					this.end=data[1]
				}
				this.popupShow = false;
				if(this.from == 'agent') {
					this.getPointList({num:1,size:10});
				} else {
					this.getNoneBillPoint({num:1,size:10});
				}
			},
			colosePopup() {
				this.popupShow = false
			},
			//经销商支出收入积分总数
			getPayPoint() {
				const params = {
					agencyId: this.agencyId,
					current: 1,
					pageSize: 1,
				}
				this.$http.getAgencyRebate(params).then((res) => {
					if (res.status == 0) {
						if (res.data.records && res.data.records.length > 0) {
							this.incomePoint = res.data.records[0].agencyPoints+res.data.records[0].payPoints;
							this.payPoint = res.data.records[0].payPoints;
						}
					}
				})
			},
			//经销商积分明细
			getPointList(page) {
				const params = {
					current: page.num,
					pageSize: page.size,
					start: this.start,
					end: this.end,
					agencyId: this.agencyId,
					active:this.agencyActive,
				};
				if(this.pointOptType != '-1') {
					params.pointOptType = this.pointOptType;
				}
				console.log(params)
				this.$http.getAgencyPointsBill(params).then((res) => {
					if (res.status === 0) {
						let curPageData = res.data.records;
						this.mescroll.endSuccess(res.data.records.length);
						if (page.num == 1) {
							this.pointList = []
						};
						this.pointList = this.pointList.concat(curPageData);
					} else {
						this.mescroll.endErr()
					}
				}).catch(() => {
					this.mescroll.endErr()
				});
			},
			//非经销商支出收入积分总数
			querynonAgencyRebate() {
				this.$http.getNonAgencyRebate().then((res) => {
					if (res.status == 0) {
						if(res.data) {
							this.incomePoint = res.data.customerPoints+res.data.payPoints;
							this.payPoint = res.data.payPoints;
						}
					}
				})
			},
			//非经销商积分明细
			getNoneBillPoint(page) {
				const params = {
					current: page.num,
					pageSize: page.size,
					start: this.start,
					end: this.end,
					customerUserId: this.customerUserId
				}
				if(this.pointOptType != '-1') {
					params.pointOptType = this.pointOptType;
				}
				console.log(params)
				this.$http.getNonePointsBill(params).then((res) => {
					if (res.status === 0) {
						let curPageData = res.data.records;
						this.mescroll.endSuccess(res.data.records.length);
						if (page.num == 1) {
							this.pointList = []
						};
						this.pointList = this.pointList.concat(curPageData);
					} else {
						this.mescroll.endErr()
					}
				}).catch(() => {
					this.mescroll.endErr()
				});
			},
			// DR冻结积分明细
			getDrOrderPoint(page){
				const params = {
					current: page.num,
					pageSize: page.size,
				}
				console.log(params)
				this.$http.getDrOrderPoints(params).then((res) => {
					if (res.status === 0) {
						let curPageData = res.data.records;
						this.mescroll.endSuccess(res.data.records.length);
						if (page.num == 1) {
							this.pointList = [];
						};
						this.pointList = this.pointList.concat(curPageData);
					} else {
						this.mescroll.endErr()
					}
				}).catch(() => {
					this.mescroll.endErr()
				});
			},
			//店铺冻结积分明细
			getEsOrderPoint(page) {
				const params = {
					current: page.num,
					pageSize: page.size,
					customerUserId: this.customerUserId
				}
				console.log(params)
				this.$http.getEsOrderPoints(params).then((res) => {
					if (res.status === 0) {
						let curPageData = res.data.records;
						this.mescroll.endSuccess(res.data.records.length);
						if (page.num == 1) {
							this.pointList = []
						};
						this.pointList = this.pointList.concat(curPageData);
					} else {
						this.mescroll.endErr()
					}
				}).catch(() => {
					this.mescroll.endErr()
				});
			}
		},
	}
</script>

<style lang="scss">
	.point-record {
		width: 100%;
		height: 100vh;

		/* 隐藏scroll-view滚动条*/
		::-webkit-scrollbar {
			width: 0;
			height: 0;
			color: transparent;
			display: none;
		}

		.top-content {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 99;
		}

		.pd {
			.customers-total {
				width: 100%;
				// background: url(~@/packageD/static/img/bg.png) no-repeat center center;
				background-size: 100% 100%;
				background-position: center center;
				background-size: cover;
				color: #fff;

				.customers-num {
					padding-top: 34rpx;
					display: flex;

					.item {
						width: 50%;
						text-align: center;
						font-size: 58rpx;
						color: #111111;
						font-weight: 600;
					}
				}

				.customers-explain {
					display: flex;
					font-size: 28rpx;
					padding-bottom: 32rpx;

					.item {
						width: 50%;
						text-align: center;
						color: #666666;
					}
				}
			}
		}
		
		.top-tabs-view {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-shadow: 0 0 4rpx #eee;
			white-space: nowrap;
			height: 76rpx;
			background-color: #fff;
		
			.tabs-item-wrap {
				display: inline-block;
				white-space: nowrap;
				width: 33%;
				&.tabs-item-other{
					width: 50%;
				}
				.tabs-item {
					margin-left: 35rpx;
					margin-right: 30rpx;
					position: relative;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
		
					.tabs-item-txt {
						height: 74rpx;
						line-height: 80rpx;
						font-size: 28rpx;
						color: #999999;
		
						&.theme-color {
							color: #111111;
						}
					}
		
					.tabs-item-bottom {
						position: absolute;
						bottom: 0rpx;
						width: 80rpx;
						height: 6rpx;
						border-radius: 4rpx;
						left: calc(50% - 40rpx);
						&.theme-color {
							background: #EE0A24;
						}
					}
				}
			}
		}
		
		.condition {
			display: flex;
			background: #fff !important;
		}
		
		.condition-border {
			border-bottom: 2rpx solid #f7f7f7;
			margin-top: 16rpx;
		}

		.time-area {
			background: #fff;
			padding: 22rpx 32rpx;
			display: flex;
			color: #111;
			font-size: 28rpx;

			.icon-time {
				font-size: 20rpx;
				position: relative;
				top: 2rpx;
				color: #EA655E;
			}
		}

		.point-all {
			// margin-top: 266rpx;

			.point-wrapper {
				padding: 24rpx 32rpx 0;
				background-color: #fff;

				.content-box {
					border-bottom: 2rpx solid #eee;
					display: flex;
					justify-content: space-between;
					padding-bottom: 24rpx;
					align-items: center;

					.top-info {
						font-size: 28rpx;
					}

					.date {
						font-size: 24rpx;
						color: #999999;
					}
					
					.remark {
						font-size: 22rpx;
						color: #d6d6d6;
						margin-top: 6rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						width: 100%;
						overflow: hidden;

					}

					.decrease-count {
						font-size: 32rpx;
						color: #5EEA62;
					}

					.add-count {
						font-size: 28rpx;
						color: #EA655E;
					}
				}

			}
		}
		.left-info{
			width: calc(100% - 130rpx);
		}
		.right-info{
			width: 130rpx;
			height: 100%;
			text-align: right;
		}
	}
</style>
